<template>
  <div>
    <!-- 上次文件 -->
    <div class="box">
      <el-button type="primary" @click="showupload">上传文件</el-button>
      <el-button type="success" @click="showtrain">训练文件</el-button>
      <el-button type="info" @click="downloadXls">下载模版</el-button>
    </div>
    <el-dialog
      title="上传文件"
      :visible.sync="dialogOfUpload"
      limit="1"
      width="35%"
      style="text-align: center"
    >
      <el-upload
        class="upload-demo"
        action="#"
        accept=".csv"
        drag
        :limit="num"
        :headers="headers"
        :auto-upload="false"
        :file-list="fileList"
        :on-change="handleChange"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">上传csv格式文件</div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogOfUpload = false" class="sureposi"
          >取 消</el-button
        >
        <el-button type="primary" @click="confirmUpload" class="sureposi"
          >上 传</el-button
        >
      </div>
    </el-dialog>

    <!-- 训练文件 -->
    <el-dialog
      title="训练文件"
      :visible.sync="trainfile"
      limit="1"
      width="35%"
      style="text-align: center"
    >
      <el-upload
        class="upload-demo"
        action="#"
        accept=".csv"
        drag
        :limit="num"
        multiple
        :headers="headers"
        :auto-upload="false"
        :file-list="fileListTrain"
        :on-change="handleChanget"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">上传csv格式文件</div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button @click="trainfile = false" class="sureposi">取 消</el-button>
        <el-button type="primary" @click="trainFile" class="sureposi"
          >开始训练</el-button
        >
      </div>
    </el-dialog>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <h2>请以下面文件格式提交，编码方式UTF-8，扩展名为.csv</h2>
      </div>
      <div>
        <img src="@/assets/tips.png" height="400" />
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 1,
      trainfile: false,
      dialogOfUpload: false,
      fileList: [],
      fileListTrain: [],
      headers: {
        "Content-Type": "multipart/form-data",
        Accept: "*/*",
      },
    };
  },
  methods: {
    handleChange(file, fileList) {
      this.fileList = [];
      this.fileList = fileList;
    },
    handleChanget(file, fileListTrain) {
      this.fileListTrain = [];
      this.fileListTrain = fileListTrain;
    },

    showupload() {
      this.fileList = [];
      this.dialogOfUpload = true;
    },
    showtrain() {
      this.fileListTrain = [];
      this.trainfile = true;
    },
    trainFile() {
      var param = new FormData();
      this.fileListTrain.forEach((val, index) => {
        param.append("file", val.raw);
        console.log(val);
      });
      param.append("token", window.sessionStorage["token"]);
      this.$http.post("train", param).then((res) => {
        // console.log(res);
        this.$message.success(res.data.msg);
      });
    },
    confirmUpload() {
      //确认上传
      var param = new FormData();
      this.fileList.forEach((val, index) => {
        param.append("file", val.raw);
      });
      param.append("token", window.sessionStorage["token"]);
      //        .post("matchfile", param, { responseType: "blob" })
      this.$http.post("matchfile", param).then((responce) => {
        var dataname = responce.data.substr(0, responce.data.indexOf("\n"));
        var filedata = responce.data.substr(7);
        if (responce.data.code == 400) {
          this.$message.error(responce.data.msg);
          return;
        }
        // new Blob([data])用来创建URL的file对象或者blob对象
        let url = window.URL.createObjectURL(
          new Blob([filedata], { type: "text/csv,charset=UTF-8" })
        );
        // 生成一个a标签
        let link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        link.download = dataname;
        document.body.appendChild(link);
        link.click();
      });
    },
    downloadXls() {
      var param = new FormData();
      // this.fileList.forEach((val, index) => {
      //   param.append("file", val.raw);
      //   console.log(valm, "-------", index);
      // });
      param.append("token", window.sessionStorage["token"]);
      this.$http.post("downloadstencil", param).then((res) => {
        // new Blob([data])用来创建URL的file对象或者blob对象
        var dataname = res.data.substr(0, 6);
        var filedata = res.data.substr(7);
        let url = window.URL.createObjectURL(
          new Blob([filedata], { type: "text/text,charset=ANSI" })
        );
        // 生成一个a标签
        let link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        // 生成时间戳
        link.download = dataname;
        document.body.appendChild(link);
        link.click();
      });
    },
  },
  mounted() {
    // 未登录路由到login
    if (window.sessionStorage["username"] == undefined) {
      this.$router.push({ path: "/login" });
      this.$message.error("请先登录！！！！");
    }
  },
};
</script>
<style scoped>
.box {
  margin-top: 3%;
}
.sureposi {
  position: relative;
  left: -30%;
}
.tip {
  margin: 3% 10%;
}

.box-card {
  margin: 1% 0px 0px 25%;
  width: 50%;
  height: 40%;
}
</style>